<template>
<div id="ShebeiList" class="page-blank">
  <van-nav-bar title="查看设备" left-arrow @click-left="goBack()"/>
  <div class="flex-body">   
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="data-box" v-for="v in list" :key="v.gprsId" @click="showBlank( v )">
        <div class="data-title">设备编号:{{ v.equipmentNum }}<br>设备心跳时间:{{ v.heartTime }}
          <span class="right" style="margin-right: 10px;" @click.stop="deleteBind( v )">解绑</span>
        </div>
        <div class="data-main">
          <div><span class="label">可借：</span><span class="value">{{ v.boorowSum }}</span></div>
          <div><span class="label">可还：</span><span class="value">{{ v.returnSun }}</span></div>
          <div><span class="label">总数：</span><span class="value">{{ v.total }}</span></div>
          <div><span class="label">所属商家：</span><span class="value">{{ v.shopName }}</span></div>
        </div>
      </div>
    </van-list>
  </div>
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="设备详情" left-arrow @click-left="blank.show = false"/>
      <div style="height: 2rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #F1F1F1;">
        <img :src="blank.info.shopPhotUrl" style="width: 1.4rem; height: 1.4rem;"/>
        <div style="height: 1.6rem; width: 3.6rem; font-size: 0.25rem; line-height: 0.5rem;">
          <div class="ft-blue" style="font-size: 0.3rem; line-height: 0.6rem;">{{ blank.info.shopName }}</div>
          <div class="ft-org">{{ blank.info.equipmentNum }}</div>
          <div class="ft-grade">{{ blank.info.createTime }}添加</div>
        </div>
        <div></div>
        <!-- <div style="width: 1.3rem; height: 0.5rem; line-height: 0.5rem; text-align: center; color: #FFFFFF; border-radius: 0.1rem; font-size: 0.2rem;
          background: #16B8BE;" @click="allForce">全部弹出</div> -->
      </div>
      <div class="flex-body" style="background: #FFF;">
        <div class="bao-box" v-for="item in blank.list" :key="item.sn">
          <div class="bao-icon">宝</div>
          <div class="bao-content">
            <div class="bao-title">
              <span style="font-size: 0.3rem; color: #333; font-weight: bold;">卡槽位置:{{ item.n }}</span>
              <div class="bao-dianliang">{{ item.e * 10 }}%</div>
            </div>
            <div style="height: 0.35rem; line-height: 0.35rem; font-size: 0.28rem; color: #999; font-size: 0.3rem;">{{ item.sn }}</div>
          </div>
          <div class="bao-button" @click="oneForce( item.n )">操作设备</div>
        </div>
      </div>
    </div>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ShebeiList extends Vue {

  roleType: any = this.$store.state.userInfo.roleType
  list: any = []
  page: any = 1
  loading: any = false
  finished: any = false
  searchValue: any = ''

  getList() {
    axios.get('/api/chargerPlaEquipmentController/getChargerPlaEquipmentList', {
      shopId: this.$route.query.shopId, page: this.page, size: 10 
    }).then((res: any) => {      
      let list = res.list||[];
      this.loading = false;
      this.list.push( ...list );
      this.page = this.page + 1;
      if(res.isLastPage) this.finished=true;
    }).catch(() => {
      this.loading = false;
      this.finished = true;
    });
  }
  deleteBind(v: any) {
    this.$dialog.confirm({
      message: `您确认要解绑 ${ v.equipmentNum } 吗？`
    }).then(() => {
      axios.post('/api/chargerPlaEquipmentController/unbindSnByshop', { query: { snList: v.equipmentNum, shopId: v.shopId } }).then((res: any) => {
        this.$toast(`解绑成功！`);
        this.$router.go(0);
      });
    })
  }  

  blank: any = {
    show: false,
    info: {},
    list: []
  }
  showBlank(item: any) {
    if(this.$store.state.userInfo.roleType !== 0 && this.$store.state.userInfo.role && this.$store.state.userInfo.role.popupPower !== 0) return ;
    this.blank.info = { shopName: item.shopName, equipmentNum: item.equipmentNum, createTime: item.createTime, 
      shopPhotUrl: item.shopPhotUrl || 'https://dxt-test.oss-cn-shenzhen.aliyuncs.com/prod/540589/20190820151601.jpg' };
    axios.get('/api/chargerPlaController/getChargerInfo', { equipmentNum: item.equipmentNum }).then((res: any) => {
      let json = res || {};
      this.blank.list = json.list || [];
      this.blank.show = true;   
    }); 
  }
  allForce() {    
    this.$dialog.confirm({ message: `您确认要全部弹出充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n: 0 }).then(() => this.$toast(`弹出成功！`));
    })
  }
  oneForce(n: any) {    
    this.$dialog.confirm({ message: `您确认要弹出卡槽位置 ${ n } 的充电宝吗？` }).then(() => {
      axios.get(`/api/chargerPlaController/force`, { equipmentNum: this.blank.info.equipmentNum, n }).then(() => this.$toast(`弹出成功！`));
    });
  }

  goBack() {
    this.$router.go(-1);
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#ShebeiList { 
  
  .bao-box {
    width: 6.9rem;
    height: 1.8rem;
    background: #FFFFFF;
    border-radius: 0.14rem;
    margin: 0.2rem auto;
    box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
    position: relative;
    .bao-icon {
      width: 0.9rem;
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      border-radius: 50%;
      font-size: 0.4rem;
      color: #FFFFFF;
      background: #16B8BE;
      position: absolute;
      left: 0.23rem;
      top: 0.45rem;
    }
    .bao-content {
      position: absolute;
      top: 0.45rem;
      left: 1.4rem;
      .bao-title {
        height: 0.55rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        .bao-dianliang {
          width: 0.88rem;
          height: 0.38rem;
          line-height: 0.38rem;
          border-radius: 0.16rem;
          text-align: center;
          background: rgba(46,208,138,0.1);
          font-size: 0.16rem;
          color: #2ED08A;
          margin-left: 0.4rem;
        }
      }
    }
    .bao-button {
      width: 1.67rem;
      height: 0.54rem;
      line-height: 0.54rem;
      border-radius: 0.27rem;
      text-align: center;
      font-size: 0.25rem;
      color: #FFFFFF;
      background: #16B8BE;
      box-shadow: 3px 3px 18px 3px rgba( 22, 184, 190, 0.32 );
      position: absolute; 
      top: 0.45rem;
      right: 0.32rem;
    }
  }
  .data-box {
    line-height: 26px;
    background: #fff;
    box-shadow: 1px 1px 2px 1px #dedede;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 0.24rem;
    box-sizing: border-box;
    width: 6.7rem;
    margin: 0.1rem auto;
  }
  .data-box .data-title {
    line-height: 30px;
    border-bottom: 1px solid #dedede;
  }
  .data-box .data-title .right {
    float: right;
    color: #0086d1;
    cursor: pointer;
  }
  .data-box .data-main {
    padding: 5px 0;
  }
  .data-box .data-main .label {
    color: #0086d1;
  }
}
</style>

